<template>
  <div>
    <!--  卡片区域-->
    <el-card>
      <!--    搜索和添加区域-->
      <el-row :gutter="20">
        <el-col :span="8">
        </el-col>
        <el-col :span="12">
          <el-button type="primary" @click="showAddTourVisible">添加景点</el-button>
        </el-col>
      </el-row>
      <!--      表格区域-->
      <el-table :data="tableData" stripe style="width: 100%" class="tb">
        <el-table-column prop="author" label="景点名称" width="220"></el-table-column>
        <el-table-column prop="city" label="所在城市" width="220"></el-table-column>
        <el-table-column prop="address" label="地址" width="300"></el-table-column>
        <el-table-column prop="date" label="创建时间" width="300"></el-table-column>
        <el-table-column label="操作">
          <el-button type="primary" size="small">编辑</el-button>
          <el-button type="danger" size="small">删除</el-button>
        </el-table-column>
      </el-table>
      <!--      分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pagenum"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
<!--    新增景点的对话框-->
    <el-dialog title="添加景点" :visible.sync="addTourVisible">
      <el-form :model="addTourForm"  :rules="addTourFormRules" ref="addTourFormRef">
        <el-form-item label="景点名称" prop="author" width="50%">
          <el-input v-model="addTourForm.name"></el-input>
        </el-form-item>
        <el-form-item label="所在城市" prop="city" width="50%">
          <el-input v-model="addTourForm.city"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address" width="50%">
          <el-input v-model="addTourForm.address"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addTourVisible = false">取 消</el-button>
        <el-button type="primary" @click="addTour">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { list } from '@/api/tourTable'

export default {
  data() {
    return {
      pageInfo: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      input: {},
      tableData: [],
      // eslint-disable-next-line no-undef
      total: 0,
      list: [],
      addTourVisible: false,
      addTourForm: {
        author: '',
        city: '',
        address: ''
      },
      addTourFormRules: {
        author: [
          { required: true, message: '请输入景点名称', trigger: 'blur' },
          { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
        ],
        city: [
          { required: true, message: '请输入所在城市名称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入地址', trigger: 'blur' },
          { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      console.log(11111)
      const { data } = await list()
      console.log(data)
      this.tableData = data.items
      this.total = data.total
    },
    handleSizeChange(newSize) {
      this.pageInfo.pagesize = newSize
      this.getList()
    },
    handleCurrentChange(newPage) {
      this.pageInfo.pagenum = newPage
    },
    showAddTourVisible() {
      this.addTourVisible = true
    },
    addTour() {

    }
  }
}
</script>

<style scoped>
.tb {
  margin-top: 15px;
}
</style>
